<template>
  <div class="worktable">
    <el-dialog
      title="企业三证信息过期提醒"
      :visible.sync="infoVisible"
      width="600px"
    >
      <el-table :data="detailData" stripe show-header style="width: 100%;">
        <el-table-column type="index" label="序号" />
        <el-table-column prop="company" label="企业名称" />
      </el-table>
      <div class="detail-pagination">
        <el-pagination small layout="prev, pager, next" :total="50" />
      </div>
    </el-dialog>
    <div class="worktable-top">
      <div class="person-info">
        <div class="person-info-top">
          <el-image class="img" :src="url" :fit="fit" />
          <p class="company-name">国科恒泰XXXXX公司</p>
        </div>
        <div class="person-info-bottom">
          <span>上次登录时间:</span>
          <span>2019-10-10 16:38:00</span>
        </div>
      </div>
      <!-- <div class="on-message">
        <el-card
          class="box-card"
          shadow="never">
          <div
            slot="header"
            class="clearfix">
            <span>待处理事务</span>
          </div>
          <div class="content">
            <span>
              <el-badge
                :value="2"
                class="item">采购待处理</el-badge>
            </span>
            <span>
              <el-badge
                :value="2"
                class="item">采购待发货</el-badge>
            </span>
          </div>
          <div>
            <span>
              <el-badge
                :value="2"
                class="item">安全库存预警</el-badge>
            </span>
            <span>
              <el-badge
                :value="2"
                class="item">开票提醒</el-badge>
            </span>

          </div>
        </el-card>
      </div>-->
      <div class="order-box">
        <h3 class="order-detail">订单追踪情况</h3>
        <el-tabs v-model="activeName" @tab-click="stitchTab">
          <el-tab-pane
            v-for="(item, index) in tabsData"
            :key="index"
            :label="item.label"
            :name="item.name"
          >
            <el-container class="order-data-detail">
              <el-steps :active="item.active" class="order-steps">
                <el-step
                  class="single-step"
                  @click.native="handleClickState(item.active, itemChild.prop)"
                  v-for="(itemChild, indexChild) in item.itemProgress"
                  :key="indexChild"
                  :title="itemChild.title"
                  :description="itemChild.description"
                />
              </el-steps>
            </el-container>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="container-box">
      <div class="container-box-left">
        <h3 class="title">待办事务</h3>
        <!-- 搜索查询 -->
        <SearchForm
          :show-collapse="false"
          :label-width="'80px'"
          :data="form"
          ref="form"
          :compact-data="compactSearchForm"
          @searchForm="val => searchForm('toDoList', val)"
          @resetForm="val => resetForm('toDoList', val)"
        />
        <!-- 待办事务列表模块 -->
        <el-editable
          v-loading="tableLoading"
          ref="table"
          :data="tableList"
          height="200"
          :columns="columns"
        >
          <!-- 操作列 -->
          <template slot="default-action" slot-scope="{row}">
            <el-button
              size="small"
              @click.stop="goToHandle(row)"
              type="text text-primary"
              >去处理</el-button
            >
          </template>
        </el-editable>
        <!-- 分页模块 -->
        <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="curPage"
          :page-sizes="PAGE_NUMBER"
          :page-size="pageSize"
          :layout="PAGINATION_LAYOUT"
          :total="totalElements"
        />
      </div>
      <div class="container-box-right">
        <h3 class="licence-title">证照预警</h3>
        <!-- 搜索查询 -->
        <SearchForm
          :show-collapse="false"
          :label-width="'100px'"
          :data="licenceForm"
          ref="licenceForm"
          @searchForm="val => searchForm('licence', val)"
          @resetForm="val => resetForm('licence', val)"
        />
        <el-editable
          v-loading="tableLoading"
          ref="licenceTable"
          :data="licenceTableList"
          height="200"
          :columns="licenceColumns"
        >
          <!-- 操作列 -->
          <template slot="default-action" slot-scope="{row}">
            <el-button
              size="small"
              @click.stop="handleLicenceInfo(row)"
              type="text text-primary"
              >{{
                Number(row.licenceType) === 0
                  ? '维护企业证照信息'
                  : '维护产品证照信息'
              }}</el-button
            >
          </template>
        </el-editable>
      </div>
    </div>
    <!-- <div class="worktable-cont">
      <div class="worktable-left">
        <div class="worktable-left-top">
          <div>
            <span>负责人</span>
            <el-input
              placeholder="请输入"
              v-model="principal"
              style=" width: 190px;"/>
          </div>
          <div>
            <span>产品线</span>
            <el-input
              placeholder="请输入"
              v-model="productLine"
              style=" width: 190px;"/>
          </div>
          <div class="type">
            <span>事务类型</span>
            <el-select
              style=" width: 190px;"
              v-model="value"
              @change="typeChange"
              placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="radio">
          <el-radio
            v-model="radio"
            @change="dayChange"
            label="1">今天</el-radio>
          <el-radio
            v-model="radio"
            @change="dayChange"
            label="2">三天</el-radio>
          <el-radio
            v-model="radio"
            @change="dayChange"
            label="3">七天</el-radio>
          <el-radio
            v-model="radio"
            @change="dayChange"
            label="4">全部</el-radio>
        </div>
        <div class="worktable-left-center">
          <el-table
            stripe
            :data="info">
            <el-table-column
              width="50"
              label="序号">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="事务类型"
              width="180"/>
            <el-table-column
              v-if="!flag"
              prop="principal"
              label="负责人"/>
            <el-table-column
              prop="num"
              label="编号"/>
            <el-table-column
              style='color:red;'
              prop="name"
              label="名称">
              <template slot-scope="scope">
                <span class="name">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="date"
              width="50"
              label="天数"/>
          </el-table>
        </div>
        <div class="worktable-left-bontom">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          />
        </div>
      </div>
      <div class="worktable-right">
        <h3>到期提醒</h3>
        <div class="expire">
          <el-table
            stripe
            :data="expireTableData">
            <el-table-column
              prop="integreate"
              label="企业三证"/>
            <el-table-column
              prop="ninety"
              label="90"
              width="50">
              <template slot-scope="scope">
                <span
                  size="mini"
                  :class="scope.row.ninety>0?'primary':'default'">{{ scope.row.ninety }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="thirty"
              label="30"
              width="50">
              <template slot-scope="scope">
                <span
                  size="mini"
                  :class="scope.row.thirty>0?'warning':'default'">{{ scope.row.thirty }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="expire"
              label="过期"
              width="50">
              <template slot-scope="scope">
                <span
                  size="mini"
                  :class="scope.row.expire>0?'danger':'default'"
                  @click="scope.row.expire>0?handleShowDetail(scope.row):''">{{ scope.row.expire }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>-->
  </div>
</template>
<script>
import ElEditable from '@components/el-editable'
import SearchForm from '@components/search'

import {PAGE_NUMBER, PAGINATION_LAYOUT} from '@const/common'
// import { queryOrderTrack, queryOrderData } from '@const/api'
import {
  tableData,
  worktableColumns,
  tabsData,
  SEARCH_FORM,
  TABLE_COLUMNS,
  LICENCE_COLUMNS,
  LICENCE_FORM,
  LINK_URL
} from './const'
export default {
  components: {
    ElEditable,
    SearchForm
  },
  data() {
    return {
      // 查询条件配置项
      form: SEARCH_FORM,
      // 待办事务table列表配置信息
      tableLoading: false,
      columns: TABLE_COLUMNS,
      tableList: tableData,
      // 分页信息
      curPage: 1,
      PAGE_NUMBER,
      PAGINATION_LAYOUT,
      pageSize: PAGE_NUMBER[0],
      totalElements: 0,
      // 证照预警table列表信息
      licenceTableList: [
        {
          id: '01',
          licenceType: 0,
          licenceName: '三类医疗器械许可经营证',
          period: '7天后过去',
          expired: ''
        },
        {
          id: '02',
          licenceType: 1,
          licenceName: 'xx产品-注册证',
          period: '',
          expired: '1'
        }
      ],
      licenceColumns: LICENCE_COLUMNS,
      // 证照预警查询条件
      licenceForm: LICENCE_FORM,
      tabsData,
      fit: 'fill',
      url:
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      activeName: '1',
      principal: '',
      productLine: '',
      options: [],
      value: '',
      radio: 0,
      info: [],
      flag: false,
      currentPage: 1,
      aa: 'danger',
      bb: 'default',
      expireTableData: [
        {
          id: '1',
          integreate: '授权书',
          ninety: '90',
          thirty: '30',
          expire: '30',
          name: 'sfaz'
        },
        {
          id: '2',
          integreate: '注册证',
          ninety: '33',
          thirty: '22',
          expire: '0'
        },
        {
          id: '3',
          integreate: '经营许可证 ',
          ninety: '33',
          thirty: '0',
          expire: '22'
        },
        {
          id: '4',
          integreate: '药品生产许可证',
          ninety: '0',
          thirty: '0',
          expire: '22'
        }
      ],
      worktableColumns,
      infoVisible: false,
      detailData: [
        {
          id: 1,
          company: '北京国际医疗贸易(上海)有限公司'
        },
        {
          id: 2,
          company: '北京国际医疗贸易(上海)有限公司'
        }
      ]
    }
  },
  computed: {
    compactSearchForm() {
      return this.form.slice(0, 2)
    }
  },
  methods: {
    handleClick(tab, event) {},
    fnSet() {
      if (!this.value) {
        this.info = tableData
        return
      }
      this.info = []
      for (let i in tableData) {
        if (this.value === tableData[i].address) {
          this.info.push(tableData[i])
        }
      }
    },
    find(array, val) {
      let flag = false
      if (array[0] < val && array[1] >= val) flag = true
      return flag
    },
    fnStr() {
      if (this.radio * 1 === 4) {
        this.fnSet()
      } else {
        this.value = ''
      }
    },
    typeChange() {
      if (this.value.length === 0) this.flag = false
      else this.flag = true
      if (this.radio !== 4) {
        this.radio = '0'
      }
      this.fnSet()
    },
    dayChange() {
      let arr = [[0, 1], [1, 3], [3, 7]]
      if (this.radio !== 4) this.flag = true
      else this.flag = false
      this.fnStr()
      if (this.radio * 1 === 0 || this.radio * 1 === 4) return
      this.info = []
      for (let i in tableData) {
        if (this.find(arr[this.radio - 1], tableData[i].date)) {
          this.info.push(tableData[i])
        }
      }
    },
    handleShowDetail() {
      this.infoVisible = true
    },

    // 查询订单追踪情况
    async getOrderTrack(orderType) {
      // const res = await this.$axios.$get(queryOrderTrack, {
      //   params: {
      //     orderType
      //   }
      // })
      // Object.is(res.code, '0') && (this.tabsData = this.assignArray(this.tabsData, res.payload))
      // res.code !== '0' && this.$message.warning('请求失败！')
    },
    // stitchTab
    stitchTab(tab) {
      Object.is(tab.name, '1') && this.getOrderTrack(tab.name - 0)
      Object.is(tab.name, '2') && this.getOrderTrack(tab.name - 0)
      Object.is(tab.name, '3') && this.getOrderTrack(tab.name - 0)
      Object.is(tab.name, '4') && this.getOrderTrack(tab.name - 0)
    },
    // 订单追踪赋值
    assignArray(arr, res) {
      arr.forEach(item => {
        item.itemProgress.forEach(single => {
          Object.is(single.title, '待确认') &&
            (single.description = res.toBeConfirmCount.toString())
          Object.is(single.title, '待发货') &&
            (single.description = res.toBeDeliveredCount.toString())
          Object.is(single.title, '待收货') &&
            (single.description = res.toBeReceiveCount.toString())
          Object.is(single.title, '部分收货') &&
            (single.description = res.someReceiveCount.toString())
          Object.is(single.title, '已拒绝') &&
            (single.description = res.rejectedCount.toString())
          Object.is(single.title, '已完成') &&
            (single.description = res.completedCount.toString())
        })
      })
      return arr
    },
    // 点击跳转
    handleClickState(value, status) {
      switch (value) {
        case 1:
          this.$router.push({
            path: '/orderManagement/agency/saleManagement/wholesaleOrders',
            query: {queryOrderStatus: status}
          })
          break
        case 2:
          this.$router.push({
            path: '/orderManagement/agency/saleManagement/longConsignmentOrder',
            query: {queryOrderStatus: status}
          })
          break
        case 3:
          this.$router.push({
            path: '/orderManagement/agency/saleManagement/consignmentOrder',
            query: {queryOrderStatus: status}
          })
          break
        case 4:
          this.$router.push({
            path: '/orderManagement/agency/saleManagement/followOrder',
            query: {queryOrderStatus: status}
          })
          break
        default:
          break
      }
    },
    goToHandle(row) {
      this.$router.push(LINK_URL[row.type])
    },
    handleLicenceInfo(row) {
      // TODO维护企业证照信息
      const registerManagement = '/productManagement/register'
      const linkUrl =
        Number(row.licenceType) === 0
          ? this.$PATH_CONST.qualification_exchange
          : registerManagement
      this.$router.push(linkUrl)
    },
    getTableList(query) {
      // TODO获取待办事务列表
    },
    getlicenceTableList(query) {
      // TODO获取证照预警列表
    },
    searchForm(type, condition) {
      console.log(type, condition)
      type === 'todoList'
        ? this.getTableList(condition)
        : this.getlicenceTableList(condition)
    },
    resetForm(type, condition) {
      this.curPage = 1
      type === 'todoList'
        ? this.getTableList(condition)
        : this.getlicenceTableList(condition)
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.getTableList()
    },
    handleCurrentChange(curPage) {
      this.curPage = curPage
      this.getTableList()
    }
  },
  mounted() {
    let arr = []
    for (let i in tableData) {
      arr.push(tableData[i].address)
    }
    for (let i in arr) {
      this.options.push({
        value: arr[i],
        label: arr[i]
      })
    }
    this.info = tableData

    // 订单追踪
    this.getOrderTrack(this.activeName - 0)
  }
}
</script>

<style lang="less" scoped>
.worktable {
  font-size: 14px;
  font-weight: 400;
  min-width: 925px;
  background: #fff;
  min-height: 600px;
  // display: flex;

  .detail-pagination {
    margin-top: 10px;
    text-align: center;
  }

  .worktable-top {
    width: 100%;
    // padding: 2% 0;
    padding-bottom: 20px;
    border-bottom: 10px solid #f7f8fa;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 30px;

    .person-info {
      width: 30%;
      padding: 40px;
      border: 1px solid #ccc;

      .person-info-top {
        display: flex;
        flex-direction: row;
        padding-bottom: 10px;

        .img {
          margin-bottom: 5px;
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }

        .company-name {
          line-height: 50px;
          padding-left: 20px;
        }
      }
    }

    .on-message {
      // display: none;
      width: 35%;
      margin: 0 10px;

      .content {
        span {
          padding-right: 3px;
        }
      }

      .item {
        margin-top: 10px;
        margin-right: 40px;
        color: #2371c5;
      }
    }

    .order-box {
      width: 60%;
      margin-left: 40px;
      padding: 10px 20px;

      .order-data-detail {
        .order-steps {
          width: 100%;

          .single-step {
            cursor: pointer;
          }
        }
      }
    }
  }

  .container-box {
    display: flex;
    flex-direction: row;

    .container-box-left {
      flex: 1;
      padding-right: 20px;

      .title {
        padding-bottom: 10px;
      }
    }

    .container-box-right {
      .licence-title {
        padding: 0 0 10px 20px;
      }

      flex: 1;
    }

    .pagination {
      padding-top: 10px;
      display: flex;
      justify-content: flex-end;
      padding-right: 0;
    }
  }

  .worktable-cont {
    // display: none;
    overflow: hidden;

    .worktable-left {
      width: 75%;
      float: left;
      border-right: 10px solid #f7f8fa;

      .worktable-left-top {
        width: 100%;
        padding: 2% 0;
        display: flex;
        align-items: center;

        div {
          display: flex;
          align-items: center;
          margin-right: 8px;

          span {
            padding-right: 6px;
          }
        }

        .type {
          padding-right: 5px;
        }
      }

      .radio {
        width: 50%;
        margin: 10px 0;
      }

      .worktable-left-center {
        width: 100%;
        padding-right: 15px;

        .name {
          color: #2371c5;
        }
      }

      .worktable-left-bontom {
        text-align: center;
        margin-top: 15px;
      }
    }

    .worktable-right {
      width: 25%;
      float: left;

      h3 {
        padding-left: 4%;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(238, 240, 245, 1);
      }

      .expire {
        padding-left: 4%;

        span {
          display: inline-block;
          width: 30px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          color: #fff;
          border-radius: 3px;
        }

        .primary {
          background: #2371c5;
        }

        .warning {
          background: #eb8430;
        }

        .danger {
          background: #d85365;
          cursor: pointer;
        }

        .default {
          color: #606266;
        }
      }
    }
  }
}
</style>
